import React from "react";
import {
    Avatar, Box,
    IconButton,
    ListItem,
    ListItemAvatar,
    ListItemSecondaryAction,
    ListItemText,
    Typography
} from "@mui/material";
import {AddCircleOutline, RemoveCircleOutline} from "@mui/icons-material";
import {useGetFullName} from "../../hooks/useGetFullName";

interface AssetProps {
    code: string
    price: number
    count: number
}

export const Asset = (props: AssetProps) => {
    const { code, price, count } = props
    const { fullName } = useGetFullName(code)
    const avatarName = fullName ? fullName[0].toUpperCase() : 'A'

    return (
        <ListItem>
            <ListItemAvatar>
                <Avatar>{avatarName}</Avatar>
            </ListItemAvatar>
            <ListItemText
                primary={fullName}
                secondary={
                    <>
                        <Typography variant="body2" component="span" sx={{display: "block"}}>
                            
                            Текущая позиция: {count} шт.<br/>
                            Текущая цена: {price} руб.<br/>
                            Рекомендация: Купить
                        </Typography>
                    </>
                }
            />
            <ListItemSecondaryAction>
                <IconButton edge="end" aria-label="delete">
                    <RemoveCircleOutline />
                </IconButton>
                <IconButton edge="end" aria-label="add">
                    <AddCircleOutline />
                </IconButton>
            </ListItemSecondaryAction>
        </ListItem>
    )
}